<template>
  <div>
    <div class="mb15">
      <a-breadcrumb>
        <a-breadcrumb-item>店铺管理</a-breadcrumb-item>
        <a-breadcrumb-item>店铺分类</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="flex justify-content-between mb10">
      <div class="flex">
        <div>
          <span class="mr5"><a-button type="primary" size="small" :loading="addLoading"> <template #icon><PlusOutlined/> </template>添加</a-button></span>
          <span class="mr5"><a-button type="primary" size="small" class="mainbg5" :disabled="state.selectedRowKeys.length == 0"> <template
              #icon><CheckOutlined/> </template>批量通过</a-button></span>
          <span class="mr5"><a-button type="primary" size="small" :disabled="state.selectedRowKeys.length == 0"
                                      class="mainbg3"> <template #icon><ArrowUpOutlined/> </template>批量上架</a-button></span>
          <span class="mr5"><a-button type="primary" size="small" :disabled="state.selectedRowKeys.length == 0"
                                      class="mainbg2"> <template #icon><ArrowDownOutlined/> </template>批量下架</a-button></span>
          <span class="mr5"><a-button type="primary" size="small" :disabled="state.selectedRowKeys.length == 0" danger> <template
              #icon><CloseOutlined/> </template>批量删除</a-button></span>
        </div>
      </div>
      <div>
        <a-form layout="inline" autocomplete="off">
          <a-form-item label="关键词">
            <a-input v-model:value.trim="queryParams.keyword" size="small" style="width: 160px" @change="handleSearch" placeholder="请输入关键词" allow-clear/>
          </a-form-item>
          <a-form-item label="状态">
            <a-select
                ref="select"
                size="small"
                placeholder="请选择"
                allow-clear
                v-model:value="queryParams.status"
                style="width: 120px"
            >
              <a-select-option :value="1">发布</a-select-option>
              <a-select-option :value="0">未发布</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
            <a-button type="primary" size="small" @click="handleSearch">
              <SearchOutlined/>
              搜索
            </a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>

    <a-table :columns="columns"
             rowClassName="items"
             :loading="tableLoading"
             rowKey="id"
             :scroll="{ x: 'calc(100vw - 326px)', y: 'calc(100vh - 245px)' }"
             :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
             :pagination="false"
             :data-source="tableData"
             style="height:calc(100vh - 205px)"
             size="middle" sticky bordered>
      <template #bodyCell="{ column }">
        <template v-if="column.dataIndex === 'operation'">
          <div class="editable-row-operations">
            <span class="mr5">
              <a-button type="primary"  size="small"> <template #icon><EditOutlined style="font-size:12px"/></template>编辑</a-button>
            </span>
            <a-popconfirm title="你确定删除吗?" @confirm="handleDelete(record.id)">
              <a-button type="primary" size="small" danger> <template #icon><CloseOutlined
                  style="font-size:12px"/></template>删除</a-button>
            </a-popconfirm>
          </div>
        </template>
      </template>
    </a-table>
    <div class="flex  mt20">
      <a-pagination
          v-model:current="queryParams.pageNo"
          v-model:page-size="queryParams.pageSize"
          @change="handleChangePageNo"
          :page-size-options="pageSizeOptions"
          show-size-changer
          :total="total"/>
    </div>
  </div>
</template>
<script setup>
import {ExclamationCircleOutlined} from '@ant-design/icons-vue';

const tableLoading = ref(false)
const addLoading = ref(false)
const total = ref(140)
const pageSizeOptions = ref(['10', '20', '30', '40', '50']);
const queryParams = reactive({
  pageNo: 1,
  pageSize: 25,
  sortColumns:'',
  status:null,
  keyword:''
})
const state = reactive({
  selectedRowKeys: [],
  loading: false,
})
const columns = [
  {title: 'Full Name', width: 100, dataIndex: 'name',align:"center", fixed: 'left'},
  {title: 'Age', width: 100, dataIndex: 'age',align:"center", fixed: 'left'},
  {title: 'Column 1', dataIndex: 'address', width: 150,align:"center"},
  {title: 'Column 2', dataIndex: 'address', width: 150,align:"center"},
  {title: 'Column 3', dataIndex: 'address', width: 150,align:"center"},
  {title: 'Column 4', dataIndex: 'address', width: 150,align:"center"},
  {title: 'Column 5', dataIndex: 'address', width: 150,align:"center"},
  {title: 'Column 6', dataIndex: 'address', width: 150,align:"center"},
  {title: 'Column 7', dataIndex: 'address', width: 150,align:"center"},
  {title: 'Column 8', dataIndex: 'address', width: 150,align:"center"},
  {
    title: '操作',
    dataIndex: 'operation',
    fixed: 'right',
    align: "center",
    width: 200,
  },
];


const tableData = [];
for (let i = 0; i < 20; i++) {
  tableData.push({
    id: i,
    name: `Edrward ${i}`,
    age: 32,
    address: `London Park no. ${i}`,
  });
}

// 改变分页查询
const handleChangePageNo = (pno, psize) => {
  queryParams.pageNo = pno;
  queryParams.pageSize = psize;
  handleLoadData()
}

const handleDel = () => {
  Modal.confirm({
    title: '提示',
    icon: h(ExclamationCircleOutlined),
    content: '你确定要删除吗？',
    onOk() {
      //message.destroy()
      //message.error("操作成功!!")

      //notification.destroy()
      notification.success({
        "message": "提示",
        "description": "操作成功"
      })


    },
    onCancel() {
    },
  });
}

// 选择行
const onSelectChange = (selectedRowKeys) => {
  state.selectedRowKeys = selectedRowKeys;
};


const handleDel2 = () => {
  notification.destroy()
  notification.success({
    "message": "提示",
    "description": "操作成功"
  })
}

</script>

